<template>
    <div>
        <div id="map"></div>
    </div>
</template>
<script lang='ts' setup>
import { onMounted } from 'vue'
import { Scene,Zoom } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = ref();
const init = () => {
    const scene = new Scene({
        id: 'map',
        map: new GaodeMap({
            pitch: 0,
            style: 'normal',
            center: [120.154672, 30.241095],
            zoom: 12,
            token: '77cc78c37d8b5425cd4d0f2fa76ded69',
        }),
    });


    scene.on('loaded', () => {
        const zoom = new Zoom();
        scene.addControl(zoom);
    });
}
onMounted(() => {
    nextTick(() => {
        init()
    })
})
const destory = () => {
    scene.value && scene.value?.destory();
    scene.value = null
}
onBeforeMount(() => {
    destory()
})
</script>
<style scoped lang="less">
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;

    :deep(.l7-control-container) {
        display: none;
    }
}
</style>